<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>如何在html中绑定数据</title>
    <script src="../js/lib/vue.min.js"></script>
</head>
<body>
<!--使用v-html 绑定html标签-->
<!--<div id="app" v-html="name">-->
<div id="app">
    <!--Mustache 语法 {{}}-->
    {{name}}
    <!--绑定属性使用v-bind-->
    <a v-bind:href="link">hello官网</a>
    <!--v-bind是完整写法，其简写成:-->
    <a :href="link">简写官网</a><br>
    <!--需要注意的是：当渲染的属性值是布尔值的时候（true和false），效果就不一样了，
        并不是简单地将true或者false渲染出来，而是当值为false的时候，属性会被移除。-->
    <button :disabled="dis_true">我是true</button><br>
    <button :disabled="dis_false">我是false，我的disabled属性被移除了</button><br>
    <!--支持javascript表达式-->
    num=num+1={{num + 1}}<br>
    {{ ok ? 'yes':'no'}}<br>
    <a :href="link+'?q=fesine'">拼接url</a><br>
</div>
<script>
    // 创建vm实例
    let vm = new Vue({
        //2、挂载元素
        el:"#app",
        //3、实例vm的数据
        data:{
            name:"<strong>fesine</strong>",
            link:"http://www.baidu.com",
            dis_true:true,
            dis_false:false,
            num:1,
            ok:true
        },
    });
</script>
</body>
</html>